<template>
  <header class="site-header">
    <div class="container">
      <div class="header-content">
        <div class="logo">
          <router-link to="/">
          <div class="logo-text">
            <h1>花漾定制 
              <!-- 修改logo位置成功✌ -->
            <img src="@/assets/image.png" alt="logologo" style="width: 40px; margin-bottom:-8px; margin-left:-8px;">
            </h1>
          </div>
          </router-link>
        </div>
        
        <nav class="main-nav">
          <router-link to="/" class="nav-link">首页</router-link>
          <router-link to="/diy" class="nav-link" @click="$store.commit('changeActNum', 0);">DIY花束</router-link>
          <router-link to="/user" class="nav-link">用户中心</router-link>
          <router-link to="/more" class="nav-link">更多服务</router-link>
        </nav>
        
        
        <div class="header-actions">
          <router-link to="/auth" class="btn-outline">登录 / 注册</router-link>
          <!-- 替换购物车按钮为CartComponent组件 -->
          <CartComponent />
        </div>
        
        <button class="mobile-menu-btn hide-desktop">
          <span>☰</span>
        </button>
      </div>
    </div>
  </header>
</template>

<script>
import CartComponent from './CartComponent.vue';

export default {
  name: 'SiteHeader',
  components: {
    CartComponent
  },
  data() {
    return {
      searchQuery: ''
    }
  },
  methods: {
    handleSearch() {
      if (this.searchQuery.trim()) {
        // 可以根据需要实现搜索逻辑
        // 例如跳转到搜索结果页面
        this.$router.push({
          path: '/search',
          query: { q: this.searchQuery }
        });
        
        // 或者触发一个事件让父组件处理
        this.$emit('search', this.searchQuery);
      }
    }
  }
}
</script>

<style scoped>
.site-header {
  background-color: white;
  /* background-color: #e75480; */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: sticky;
  width: 100%;
  top: 0;
  z-index: 100;
  height: 10vh;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}
/* 花体文字样式 */
.logo-text h1 {
  font-family: "STXingkai", "华文行楷", "楷体", cursive;
  font-size: 1.8rem;
  color: #e75480;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  letter-spacing: 2px;
  /* position: relative; */
}

.main-nav {
    display: flex;
  align-items: center;
  gap: 2rem;
  margin-left: auto;
}

.nav-link {
   color: #333;
  font-weight: 500;
  transition: color 0.3s;
  position: relative;
  text-decoration: none;
}

.nav-link:hover {
  color: #e75480;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #e75480;
  transition: width 0.3s;
}

.nav-link:hover::after,
.router-link-active::after {
  width: 100%;
}

.router-link-active {
  color: #e75480;
}



.search-input {
  width: 100%;
  padding: 0.6rem 2.5rem 0.6rem 1rem;
  border: 1px solid #ddd;
  border-radius: 20px;
  font-size: 0.9rem;
  transition: all 0.3s;
}

.search-input:focus {
  outline: none;
  border-color: #e75480;
  box-shadow: 0 0 0 2px rgba(231, 84, 128, 0.1);
}

.search-button {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: #666;
}

.search-button:hover {
  color: #e75480;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-left: 15px;
}

.btn-outline {
  padding: 0.5rem 1rem;
  border: 1px solid #e75480;
  border-radius: 4px;
  color: #e75480;
  text-decoration: none;
  transition: all 0.3s;
}

.btn-outline:hover {
  background-color: #e75480;
  color: white;
}

.mobile-menu-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  display: none;
}

@media (max-width: 768px) {
  .main-nav, .header-actions, .search-container {
    display: none;
  }
  
  .mobile-menu-btn {
    display: block;
  }
}
</style>